<template>
  <el-upload
    class="upload-demo"
    :class="{disableDel:isDisableDel}"
    :action="excelUploadApi"
    :before-upload="beforeUpload"
    :before-remove="beforeRemove"
    :on-remove="handleRemove"
    :headers="headers"
    :on-success="handleSuccess"
    :on-preview="handlePreview"
    :file-list="fileList"
    :limit="1"
    accept=".xls,.xlsx"
    style="margin:10px 0"
  >
    <el-button size="small" type="primary">点击导入</el-button>
    <div
      slot="tip"
      class="el-upload__tip"
      style="margin:20px 0"
    >只能导入xls/xlsx文件，且不超过一个
    </div>
  </el-upload>
</template>

<script>
import {mapGetters} from 'vuex'
import {getToken} from '@/utils/auth'
import {Message} from 'element-ui'
import {downloadTheFile} from '@/utils'

export default {
  name: 'ExcelUploader',
  props: {
    limit: null,
    theFileList: {
      type: Array,
      default: () => {
        return []
      }
    },
    isDisableDel: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      headers: {
        token: getToken()
      },
      fileList: this.theFileList,
      isOverSize: false,
    }
  },

  computed: {
    ...mapGetters(['fileUploadApi', 'fileDownloadApi', 'excelUploadApi'])
  },
  methods: {
    beforeRemove(file, fileList) {
      if (!this.isOverSize) {
        return this.$confirm(`确定移除 ${file.name}？`)
      }
    },
    handleRemove(file, fileList) {
      this.$emit('updateFileList', fileList)
    },
    handleSuccess(response, file, fileList) {
      if (response.code !== 0) {
        Message({
          message: response.msg || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
        // file.status = 'fail'
        // fileList.splice(fileList.indexOf(file), 1)
      } else {

        this.$emit('updateFileList', response.data)
      }
    },
    beforeUpload(file) {
      // const isLt20M = file.size / 1024 / 1024 < 20;
      //
      // if (!isLt20M) {
      //   this.isOverSize = true;
      //   this.$message.error('上传文件大小不能超过 20MB!');
      // } else {
      //   this.isOverSize = false;
      // }
      // return isLt20M;
      console.log(file)
      var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
      const extension = testmsg === 'xls'
      const extension2 = testmsg === 'xlsx'
      // const isLt2M = file.size / 1024 / 1024 < 10
      if(!extension && !extension2) {
        this.$message({
          message: '上传文件只能是 xls、xlsx格式!',
          type: 'warning'
        });
      }
      // if(!isLt2M) {
      //     this.$message({
      //         message: '上传文件大小不能超过 10MB!',
      //         type: 'warning'
      //     });
      // }
      // return extension || extension2 && isLt2M
      return extension || extension2
    },
    handlePreview(file) {
      downloadTheFile(`/business/file/download?fileId=${file.fileId}`, file.name)
    }
  }
}
</script>

<style lang="scss" scoped>
.disableDel {
  ::v-deep .el-icon-close {
    display: none;
  }

  ::v-deep .el-icon-close-tip {
    display: none;
  }
}
</style>
